<template>
  <div class="showStudent">
    <h2>我是身份</h2>
    <ul>
			<li>伙伴姓名：{{name}}</li>
			<li>伙伴姓名：{{age}}</li>
		</ul>
    <h3>我收到的数据</h3>
    <button @click="showStudent">展示更多信息</button>
    <ul>
			<li>恶魔果实：{{DevilFruit}}</li>
			<li>悬赏：{{OfferAReward}}</li>
			<li>故乡：{{home}}</li>
		</ul>
  </div>
</template>

<script>
export default {
  name: "Student",
  // props:['DevilFruit','OfferAReward','home'],
  props: {
    DevilFruit:String,
    OfferAReward:Number,
    home:String
  },
  data() {
    return {
      name: "托尼托尼.乔巴",
      age: "17",
      gender: "男",
      identity: "船医",
    };
  },
  methods: {
    showStudent() {
      alert(`性别:${this.gender},职业:${this.identity}`)
    }
  }
}
</script>

<style>
.showStudent {
  background-color: skyblue;
  padding: 20px;
}
</style>
